<template>
  <div class="lee-tabs">
    <div
      class="tab-item"
      :class="{ 'tab-item-active': idx === activeIndex }"
      v-for="(tab, idx) in tabList"
      :key="idx"
      @click="clickTab(idx)"
    >
      <span class="iconfont" :class="tab.icon"></span>
      <span>{{ tab.name }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { TabItem } from "./type";

import { ref } from "vue";
// 接收父组件传入的props
const props = defineProps({
  tabList: {
    type: Array as () => TabItem[],
    default: () => [
      { name: "全部", icon: "iconmenu_01" },
      { name: "工作流", icon: "iconrefresh2" },
      { name: "Chatflow", icon: "iconrefresh2" },
      { name: "聊天助手", icon: "iconrefresh2" },
      { name: "Agent", icon: "iconrefresh2" },
      { name: "文本生成", icon: "iconrefresh2" },
    ],
  },
});
// 转换为响应式数据
const tabList = ref<TabItem[]>(props.tabList);
const activeIndex = ref(0);
const clickTab = (index: number) => {
  activeIndex.value = index;
};
</script>
<style lang="scss" scoped>
@use "@/assets/css/lee.scss" as lee;
.lee-tabs {
  display: flex;
  flex-direction: row;
}
.tab-item {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 7px;
  padding-bottom: 7px;
  color: lee.$color-font-black-4;
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  border-radius: 0.5rem;
  border-color: transparent;
  border-width: 0.5px;
  border-style: solid;
  cursor: pointer;
  box-sizing: border-box;
  margin-right: 0.25rem;
  .iconfont {
    margin-right: 5px;
    font-size: 12px;
  }
  &:hover {
    background-color: lee.$color-background-gray-1-hover;
  }
}
.tab-item-active {
  color: lee.$color-font-blue-1;
  border-color: lee.$color-font-white-1;
  background-color: lee.$color-background-gray-1-hover;
}
</style>
